<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件模拟</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #canvas_box {
            position: relative;
            width: 100vw;
            height: 100vh;
        }
    </style>
</head>
<body>
    <!-- <div style="height: 2000px;width: 100%;background-color: gray;"></div> -->
    <div id="canvas_box">
        <canvas id="canvas"></canvas>
    </div>
    <button id="btn">下载</button>
    <script>
        window.onload = function () { 
            // 1、自定义事件实现滚轮上下滚动事件
            // 第一种
            // let wheelupEvent = new CustomEvent('wheelup', {});
            // let wheeldownEvent = new CustomEvent('wheeldown', {});

            // 第二种
            // let wheelupEvent = new Event('wheelup', {});
            // let wheeldownEvent = new Event('wheeldown', {});

            // 第三种 这种必须初始化 一般用于编程模拟鼠标等已有事件
            // createEvent参数 HTMLEvents MouseEvents UIEvents
            let wheelupEvent = document.createEvent('HTMLEvents');
            let wheeldownEvent =  document.createEvent('HTMLEvents');
            wheelupEvent.initEvent('wheelup', false, false);
            wheeldownEvent.initEvent('wheeldown', false, false);

            let preY = null;
            window.onwheel = function(e) {
                // console.log('onwheel11:', e);
                if (e.wheelDelta > 0) {
                    console.log('onwheelup:')
                    window.dispatchEvent(wheelupEvent, {data: e.wheelDelta});
                } else {
                    console.log('onwheeldown:')
                    window.dispatchEvent(wheeldownEvent, {data: e.wheelDelta});
                };
            }

            window.addEventListener('wheelup', function(e) {
                // alert('wheelupEvent 触发', e);
            })
            window.addEventListener('wheeldown', function(e) {
                // alert('wheeldownEvent 触发', e);
            })



            // 2、通过事件模拟处理移动端的canvas场景
            const canvasEle = document.querySelector('#canvas');
            if (canvasEle.getContext) {
                let ctx = canvasEle.getContext('2d');
                let container =  document.querySelector('#canvas_box');
                canvasEle.width = container.clientWidth;
                canvasEle.height = container.clientHeight;
                let startPoint = null;
                let movePoint = null;
                let drawFlag = false;
                function draw() {
                    ctx.lineWidth = 1;
                    ctx.lineCap = 'round';
                    ctx.lineJoin = 'round';
                    ctx.moveTo(startPoint.x, startPoint.y);
                    ctx.lineTo(movePoint.x, movePoint.y);
                    ctx.stroke();
                }
                canvasEle.addEventListener('mousedown', function(e) {
                    drawFlag = true;
                    startPoint = { 
                        x: e.clientX,
                        y: e.clientY
                    };
                });
                canvasEle.addEventListener('mousemove', function(e) {
                    if (drawFlag) {
                        if (!drawFlag) return;
                        movePoint = {
                            x: e.clientX,
                            y: e.clientY
                        }
                        draw();
                        startPoint= movePoint;
                    }
                });
                canvasEle.addEventListener('mouseup', function(e) {
                    if (!drawFlag) return;
                    drawFlag = false;
                });


                // 通过事件模拟来兼容wrap端
                canvasEle.addEventListener('touchstart', onTouch);
                canvasEle.addEventListener('touchmove', onTouch);
                canvasEle.addEventListener('touchend', onTouch);

                function onTouch(e) {
                    let type = null;
                    let touch = e.touches[0] || e.changedTouches[0];
                    // console.log(e);
                    switch(e.type) {
                        case 'touchstart':
                            type = 'mousedown';
                            break;
                        case 'touchmove':
                            type = 'mousemove';
                            break;
                        case 'touchend':
                            type = 'mouseup';
                            break;
                        default:
                            break;
                    };
                    const newEvent = new MouseEvent(type, touch);
                    e.target.dispatchEvent(newEvent);
                }

            };


            document.querySelector('#btn').onclick = function() {
                let a = document.createElement('a');
                // image/png、image/jpeg、image/webp等等，默认为image/png格式；
                a.href = canvasEle.toDataURL();
                a.download = 'canvas' + new Date().getTime();
                a.target = '_blank';
                a.click();
            }
        }


    </script>
</body>
</html>